<template>
	<view class="audit-container">
		<view class="status-bar"></view>
		<!-- 审批流程 -->
		<view class="flow-card" v-if="dataForm.enterpName">
			<view class="card-header">
				<text class="card-title">审批流程</text>
			</view>
			
			<view class="flow-steps">
				<!-- 发起步骤 -->
				<view class="flow-step">
					<view class="step-icon start-icon">
						<u-icon name="edit-pen" size="18" color="#fff"></u-icon>
					</view>
					<view class="step-content">
						<view class="step-title">发起</view>
						<view class="step-desc">{{dataForm.creatorTime}}</view>
						<view class="step-desc">{{dataForm.enterpName}} - {{dataForm.creatorUserName}}</view>
					</view>
					<view class="step-line" v-if="dataForm.applroveProList && dataForm.applroveProList.length > 0"></view>
				</view>
				
				<!-- 审批步骤 -->
				<view class="flow-step" v-for="(item, index) in dataForm.applroveProList" :key="index">
					<view class="step-icon" :class="getStepIconClass(item.auidStatue)">
						<u-icon :name="getStepIcon(item.auidStatue)" size="18" color="#fff"></u-icon>
					</view>
					<view class="step-content">
						<view class="step-title">
							{{ item.process }}
							<text class="step-status" :class="getStepStatusClass(item.auidStatue)">{{ getStepStatusText(item.auidStatue) }}</text>
						</view>
						<view class="step-desc">审批人：{{ item.userName }}</view>
						<view class="step-desc" v-if="[2, -1].includes(item.auidStatue) && item.auidSummary">
							意见：{{ item.auidSummary }}
						</view>
					</view>
					<view class="step-line" v-if="index !== dataForm.applroveProList.length - 1"></view>
				</view>
			</view>
		</view>
		
		<!-- 采购信息 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">采购信息</text>
			</view>
			
			<view class="info-content">
				<view class="info-row">
					<view class="info-item">
						<view class="info-label">
							<u-icon name="file-text" size="16" color="#2979ff" class="info-icon"></u-icon>
							<text>采购标题</text>
						</view>
						<text class="info-value">{{ dataForm.title || '无' }}</text>
					</view>
				</view>
				
				<view class="info-divider"></view>
				
				<view class="info-row">
					<view class="info-item">
						<view class="info-label">
							<u-icon name="rmb-circle" size="16" color="#f56c6c" class="info-icon"></u-icon>
							<text>总金额</text>
						</view>
						<text class="info-value highlight">¥{{ dataForm.costAmt || 0 }}</text>
					</view>
				</view>
				
				<view class="info-divider"></view>
				
				<view class="info-row">
					<view class="info-item">
						<view class="info-label">
							<u-icon name="map" size="16" color="#19be6b" class="info-icon"></u-icon>
							<text>采购部门</text>
						</view>
						<text class="info-value">{{ dataForm.enterpName || '无' }}</text>
					</view>
				</view>
				
				<view class="info-divider"></view>
				
				<view class="info-row">
					<view class="info-item">
						<view class="info-label">
							<u-icon name="chat" size="16" color="#909399" class="info-icon"></u-icon>
							<text>备注</text>
						</view>
						<view class="info-note">{{ dataForm.description || '无' }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 采购物品 -->
		<view class="product-card">
			<view class="card-header">
				<text class="card-title">采购物品</text>
				<text class="product-count">共{{ dataForm.productList ? dataForm.productList.length : 0 }}项</text>
			</view>
			
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in dataForm.productList" :key="index">
					<view class="product-header">
						<view class="product-name">
							<text class="name">{{ item.productName }}</text>
							<text class="code">({{ item.productCode }})</text>
						</view>
						<view class="category">{{ item.categoryName }}</view>
					</view>
					
					<view class="product-detail">
						<view class="product-info">
							<view class="spec-item">
								<text class="spec-label">单价：</text>
								<text class="spec-value">¥{{ item.defaultPrice }}</text>
							</view>
							<view class="spec-item">
								<text class="spec-label">数量：</text>
								<text class="spec-value">{{ item.qty }} {{ item.unit }}</text>
							</view>
						</view>
						<view class="product-amount">
							<text>金额：</text>
							<text class="amount">¥{{ item.costJe }}</text>
						</view>
					</view>
					
					<view class="product-remark" v-if="item.summary">
						<text class="remark-label">备注：</text>
						<text class="remark-content">{{ item.summary }}</text>
					</view>
					
					<view class="divider" v-if="index !== dataForm.productList.length - 1"></view>
				</view>
			</view>
		</view>
		
		<!-- 审批意见 (仅当不是详情模式时显示) -->
		<view class="opinion-card" v-if="!isDetail">
			<view class="card-header">
				<text class="card-title">审批意见</text>
			</view>
			
			<view class="opinion-input">
				<u-input v-model="dataForm.auidSummary" 
					type="textarea"
					placeholder="请输入您的审批意见（选填）"
					:height="100"
					:border="true"
					:maxlength="60"
					:count="true">
				</u-input>
			</view>
			
			<view class="btn-group">
				<u-button type="error" @click="openRejectModal" class="full-btn reject-btn">驳回</u-button>
				<u-button type="primary" @click="confirmApprove" class="full-btn approve-btn">同意</u-button>
			</view>
		</view>
		
		<!-- 驳回确认弹窗 -->
		<u-popup v-model="rejectModal.show" mode="center" width="80%" :mask-close-able="false">
			<view class="reject-modal">
				<view class="reject-modal-header">
					<text class="reject-modal-title">驳回确认</text>
				</view>
				<view class="reject-modal-body">
					<text class="reject-modal-content">确定要驳回此采购申请吗？</text>
					<text class="reject-modal-content">当前审批意见：</text>
					<view class="reject-opinion">
						<text v-if="dataForm.auidSummary">{{ dataForm.auidSummary }}</text>
						<text v-else class="empty-opinion">未填写审批意见</text>
					</view>
				</view>
				<view class="reject-modal-footer">
					<u-button plain size="medium" @click="rejectModal.show = false">取消</u-button>
					<u-button type="error" size="medium" @click="submitAudit(-1)">确认驳回</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				loading: false,
				isDetail: false,
				dataForm: {
					id: undefined,
					billId: undefined,
					title: undefined,
					summary: undefined,
					auidSummary: undefined,
					costAmt: 0,
					auidStatue: 0,
					productList: [],
					applroveProList: []
				},
				rejectModal: {
					show: false
				}
			}
		},
		onLoad(options) {
			if (options) {
				console.log(options)
				this.init(options.billId, options.id, options.isDetail === 'true');
			}
		},
		methods: {
			// 获取步骤图标
			getStepIcon(status) {
				const iconMap = {
					'0': 'clock',      // 未到审批
					'1': 'clock',      // 待审批
					'2': 'checkmark',  // 审批通过
					'-1': 'close'      // 审批拒绝
				};
				return iconMap[status.toString()] || 'clock';
			},
			
			// 获取步骤图标样式
			getStepIconClass(status) {
				const classMap = {
					'0': 'wait-icon',    // 未到审批
					'1': 'process-icon', // 待审批
					'2': 'success-icon', // 审批通过
					'-1': 'error-icon'   // 审批拒绝
				};
				return classMap[status.toString()] || 'wait-icon';
			},
			
			// 获取步骤状态文本
			getStepStatusText(status) {
				const textMap = {
					'0': '未开始',
					'1': '待审批',
					'2': '已通过',
					'-1': '已驳回'
				};
				return textMap[status.toString()] || '未知';
			},
			
			// 获取步骤状态样式
			getStepStatusClass(status) {
				const classMap = {
					'0': 'status-wait',
					'1': 'status-process',
					'2': 'status-success',
					'-1': 'status-error'
				};
				return classMap[status.toString()] || 'status-wait';
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 打开驳回确认弹窗
			openRejectModal() {
				this.rejectModal.show = true;
			},
			
			// 确认同意
			confirmApprove() {
				uni.showModal({
					title: '审批确认',
					content: '确定要同意此采购申请吗？',
					success: res => {
						if (res.confirm) {
							this.submitAudit(2);
						}
					}
				});
			},
			
			// 提交审批
			submitAudit(auidStatue) {
				uni.showLoading({
					title: '处理中...'
				});
				
				// 组装审批数据
				const auditData = {
					id: this.id,
					auidStatue: auidStatue,
					auidSummary: this.dataForm.auidSummary || ''
				};
				
				// 调用审批API
				this.$u.api.auidStatueApprove(auditData).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						// 关闭弹窗
						this.rejectModal.show = false;
						
						uni.showToast({
							title: auidStatue === 2 ? '审批已通过' : '已驳回',
							icon: 'success',
							duration: 2000
						});
						
						// 返回上一页并刷新
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									// 触发上一页的刷新
									const pages = getCurrentPages();
									const prevPage = pages[pages.length - 2];
									if (prevPage && prevPage.$vm && prevPage.$vm.refresh) {
										prevPage.$vm.refresh();
									}
								}
							});
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg || '审批操作失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '操作失败，请稍后重试',
						icon: 'none'
					});
					console.error('审批失败：', err);
				});
			},
			
			// 初始化页面
			init(billId, id, isDetail) {
				if (!billId) {
					uni.showToast({
						title: '参数错误',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}
				
				this.dataForm.billId = billId;
				this.id = id;
				this.isDetail = isDetail || false;
				
				// 获取采购单详情
				uni.showLoading({
					title: '加载数据...'
				});
				
				this.$u.api.applyInfo({
					id: billId
				}).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						this.dataForm = res.data;
					} else {
						uni.showToast({
							title: res.msg || '获取数据失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
					console.error('获取采购单详情失败：', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	.audit-container {
		min-height: 100vh;
		background-color: #f5f6fa;
		padding-bottom: 30rpx;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	/* 页面头部 */
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	.header-left {
		display: flex;
		align-items: center;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 16rpx;
	}
	
	.header-right {
		display: flex;
		align-items: center;
	}
	
	.action-btn {
		margin-left: 16rpx;
		height: 60rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
	}
	
	.approve-btn {
		background: linear-gradient(45deg, #19be6b, #21d07c);
		box-shadow: 0 2rpx 8rpx rgba(25, 190, 107, 0.2);
	}
	
	.reject-btn {
		background: linear-gradient(45deg, #fa3534, #ff5959);
		box-shadow: 0 2rpx 8rpx rgba(250, 53, 52, 0.2);
	}
	
	.btn-icon {
		margin-right: 4rpx;
	}
	
	/* 卡片通用样式 */
	.flow-card,
	.info-card,
	.product-card,
	.opinion-card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
		margin-top: 30rpx;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		padding-left: 20rpx;
	}
	
	.card-title::before {
		content: "";
		position: absolute;
		left: 0;
		top: 6rpx;
		height: 30rpx;
		width: 6rpx;
		background: #2979ff;
		border-radius: 3rpx;
	}
	
	/* 流程步骤 */
	.flow-steps {
		position: relative;
		padding: 10rpx 0;
	}
	
	.flow-step {
		display: flex;
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.step-icon {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		flex-shrink: 0;
	}
	
	.start-icon {
		background: linear-gradient(135deg, #63b7be, #27b2be);
	}
	
	.wait-icon {
		background: #c8c9cc;
	}
	
	.process-icon {
		background: linear-gradient(135deg, #55aaff, #525bff);
	}
	
	.success-icon {
		background: linear-gradient(135deg, #19be6b, #21d07c);
	}
	
	.error-icon {
		background: linear-gradient(135deg, #fa3534, #ff5959);
	}
	
	.step-content {
		margin-left: 20rpx;
		padding-bottom: 10rpx;
		flex: 1;
	}
	
	.step-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.step-status {
		font-size: 24rpx;
		padding: 2rpx 10rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}
	
	.status-wait {
		background-color: #f5f5f5;
		color: #999;
	}
	
	.status-process {
		background-color: #e6f7ff;
		color: #55aaff;
	}
	
	.status-success {
		background-color: #e8f5e9;
		color: #19be6b;
	}
	
	.status-error {
		background-color: #fff2f0;
		color: #fa3534;
	}
	
	.step-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
	}
	
	.step-line {
		position: absolute;
		left: 35rpx;
		top: 70rpx;
		width: 2rpx;
		height: calc(100% - 40rpx);
		background-color: #ddd;
		z-index: 1;
	}
	
	/* 优化的采购信息样式 */
	.info-content {
		padding: 10rpx 0;
	}
	
	.info-row {
		padding: 16rpx 0;
	}
	
	.info-item {
		display: flex;
		flex-direction: column;
	}
	
	.info-label {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		color: #666;
		font-size: 28rpx;
	}
	
	.info-icon {
		margin-right: 8rpx;
	}
	
	.info-value {
		font-size: 32rpx;
		color: #333;
		padding-left: 40rpx;
	}
	
	.info-note {
		font-size: 32rpx;
		color: #333;
		padding-left: 40rpx;
		line-height: 1.6;
	}
	
	.info-divider {
		height: 1rpx;
		background: #f0f0f0;
		margin: 8rpx 0;
	}
	
	.highlight {
		color: #f56c6c;
		font-weight: bold;
		font-size: 36rpx;
	}
	
	/* 产品列表样式 */
	.product-count {
		font-size: 24rpx;
		color: #666;
	}
	
	.product-list {
		padding: 10rpx 0;
	}
	
	.product-item {
		position: relative;
		padding: 20rpx 0;
	}
	
	.product-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.product-name {
		display: flex;
		align-items: center;
	}
	
	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.code {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}
	
	.category {
		font-size: 24rpx;
		color: #666;
		background-color: #f2f6fc;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.product-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}
	
	.product-info {
		display: flex;
	}
	
	.spec-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		font-size: 26rpx;
	}
	
	.spec-label {
		color: #666;
	}
	
	.spec-value {
		color: #333;
	}
	
	.product-amount {
		font-size: 26rpx;
		color: #666;
	}
	
	.product-amount .amount {
		color: #f56c6c;
		font-weight: bold;
	}
	
	.product-remark {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
	
	.divider {
		height: 1px;
		background-color: #f5f5f5;
		margin: 20rpx 0;
	}
	
	/* 审批意见 */
	.opinion-input {
		margin-bottom: 30rpx;
	}
	
	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.full-btn {
		flex: 1;
		margin: 0 10rpx;
	}
	
	/* 驳回弹窗样式 */
	.reject-modal {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
	}
	
	.reject-modal-header {
		padding: 30rpx 20rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
	
	.reject-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.reject-modal-body {
		padding: 30rpx 20rpx;
	}
	
	.reject-modal-content {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		line-height: 1.5;
	}
	
	.reject-opinion {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		min-height: 80rpx;
	}
	
	.empty-opinion {
		color: #999;
		font-style: italic;
	}
	
	.reject-modal-footer {
		display: flex;
		padding: 10rpx 20rpx;
		justify-content: space-between;
	}
	
	.reject-modal-footer button {
		margin: 0 10rpx;
		flex: 1;
	}
</style>
